<template>
	<div class="web_wrap">
		<div class="top">
			<div class="top_list">
				<img src="//s1.hdslb.com/bfs/static/mult/images/back.png" />
				<span>排行榜</span>
				<div class="clearfix"></div>
			</div>
			<div class="nav_list">
				<ul>
					<li class="active">全站</li>
					<li>动画</li>
					<li>番剧</li>
					<li>国创</li>
					<li>音乐</li>
					<li>舞蹈</li>
					<li>科技</li>
					<li>游戏</li>
					<li>娱乐</li>
					<li>鬼畜</li>
					<li>电影</li>
					<li>电视剧</li>
					<li>纪录片</li>
					<li>影视</li>
					<li>时尚</li>
					<li>生活</li>
				</ul>
			</div>
		</div>
		<div class="content_wrap c_wrap">
			<div class="cc" v-for="(item,index) in phb">
				<div class="left">
					<p>{{index+1}}</p>
				</div>
				<div class="middle">
					<img :src="item.pic" />
				</div>
				<div class="right">
					<p>{{item.title}}</p>
					<p>
						<img src="//s1.hdslb.com/bfs/static/mult/images/ico_up.png" />
						<span>{{item.author}}</span>
					</p>
					<p>
						<img src="//s1.hdslb.com/bfs/static/mult/images/ico_play.png" />
						<span>{{item.play}}</span>
					</p>
					<p>
						<img src="//s1.hdslb.com/bfs/static/mult/images/ico_danmu.png" />
						<span>{{item.video_review}}</span>
					</p>
				</div>
			</div>
		</div>
		<div class="content_wrap">456</div>
		<div class="content_wrap">789</div>
		<div class="content_wrap">147</div>
		<div class="content_wrap">369</div>
	</div>
</template>

<script>
	import CONFIG from "@/config"
	import axios from 'axios'
	
	export default{
		mounted(){
			var li=document.querySelectorAll(".nav_list ul li")
			var divs=document.querySelectorAll(".content_wrap")
			for(let i=0;i<li.length;i++){
				li[i].addEventListener("click",function(){
					for(var j=0;j<divs.length;j++){
						divs[j].classList.remove("c_wrap")
						li[j].classList.remove("active")
					}
					divs[i].classList.add("c_wrap")
				    li[i].classList.add("active")
				})
			}
			this.qz()
		},
		data(){
				return{
					phb:[]
				}
		},
		methods:{
			qz() {
				var url = CONFIG.domain + "/phb";
				axios.get(url).then((res) => {
					this.phb= res.data.data.list;
				})
			}
		}
	}
</script>

<style lang="scss">
	.web_wrap{
		.top{
			width:93%;
			margin:0 auto;
			.top_list{
				text-align: center;
				height:16px;
				img{
					height: 100%;
					overflow: hidden;
					float: left;
					vertical-align:top;
				}
				span{
					font-size: 14px;
					color: #FB7299;
					vertical-align:top;
				}
			}
			.nav_list{
				height: 20px;
				overflow: hidden;
				ul{
					white-space: nowrap;
				    overflow: hidden;
				    overflow-x: scroll;
                    height: 30px;
					li{
						display: inline-block;
						font-size: 12px;
						width: 18%;
						color: hsla(0,0%,46%,.8);
					}
					.active{
						color: #FB7299;
					}
				}
			}
		}
		.content_wrap{
			display: none;
		}
		.c_wrap{
			display: block;
		}
		.content_wrap{
			background: #f4f4f4;
			padding: 20px 0;
			.cc{
				margin-top:10px;
				.left{
					display: inline-block;
					text-align: center;
					width: 10%;
					line-height: 84px;
					p{
						font-size: 12px;
						color: #999;
					}
				}
				.middle{
					display: inline-block;
					width: 40%;
					vertical-align:top;
					img{
						width: 100%;
					}
				}
				.right{
					display: inline-block;
					width: 47%;
					vertical-align: top;
					p{
						font-size: 12px;
						color: #999;
						padding: 3px;
						text-align: left;
						img{
							width:15px;
							height: 12px;
						}
					}
					p:nth-of-type(1){
						color:#212121;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp:2;
						overflow: hidden;
					}
					p:nth-of-type(3),p:nth-of-type(4){
						display: inline-block;
					}
				}
			}
		}
	}
</style>